<template>
  <v-img
    height="100vh"
    position='center'
    src="/static/image/login-background-500x300.jpg"
  >
    <v-container fluid class="fill-height">
    <v-row
      align="center"
      justify="center"
      class="mb-12"
    >
      <v-col
        cols="12"
        md="4"
        sm="8">
        <v-card
          elevation-12
          tile>
          <v-card-title class="pa-0">
            <v-toolbar color="primary" dark flat>
             <v-toolbar-title>华广问卷 - 登录</v-toolbar-title>
            </v-toolbar>
          </v-card-title>
          <v-spacer></v-spacer>
          <v-card-text>
            <v-form ref="form" v-model='valid'>
                  <v-text-field
                    label="学号"
                    name="account"
                    prepend-icon="mdi-account"
                    v-model="loginForm.username"
                    type="text"
                  ></v-text-field>

                  <v-text-field
                    id="password"
                    label="密码"
                    name="password"
                    v-model="loginForm.password"
                    prepend-icon="mdi-lock"
                    type="password"
                  ></v-text-field>
                </v-form>
          </v-card-text>

           <v-card-actions class="pa-4 pt-0">
                <v-spacer></v-spacer>
                <v-btn color="primary" @click='login'>
                  登录
                </v-btn>
              </v-card-actions>
        </v-card>
        
      </v-col>
    </v-row>
    </v-container>
  </v-img>
</template>

<script>
export default {
  name: 'LogIn',
  props: {
    source: String,
  },
  data () {
    return {
      valid: false,
      loginForm: {
        username: '',
        password: ''
      }
    }
  },
  methods: {
    validate () {
      this.$refs.form.validate(); 
    },
    login() {
      this.$router.push({name: 'page'});
      // this.validate();
      // axios({
      //   methods: 'post',
      //   url: login_url,
      //   data: loginForm
      // }).then(
      //   function (res) {
      //     if (res.data.login) {
      //       this.isLogOut = false;
      //     } else {
      //       console.log('error');
      //     }
      //   }
      // ).catch(error => console.log(error));
    }
  }
}
</script>
